import styled from 'styled-components';
import { ThemeColor } from '../../common/globalStyle'
import { ImgWrapper } from '../person/style';

export const Container = styled.div`
  margin: 0 auto;
  width: 1200px;
  /* @media (max-width: 1920px) {
    width: 1200px;
  }

  @media (max-width: 1560px) {
    width: 1000px;
  } */
  .live {
    text-align: center;
  }
  .big-tabs {
    width: 320px;
    margin: 0 auto;
    margin-bottom: 30px;
    li {
      float: left;
      font-size: 30px;
      padding-bottom: 18px;
      cursor: pointer;
      &:nth-child(1) {
        position: relative;
        margin-right: 60px;
        &::after {
          content: '';
          width: 2px;
          height: 30px;
          position: absolute;
          background-color:#333;
          top: 2px;
          right: -30px;
        }
      }

      &.active {
        color: #8bca31;
        border-bottom: 2px solid #8bca31;
      }
    }
  }
`

export const SideBar = styled.div`
  position: fixed;
  right: 2%;
  margin-left: 660px;
  top: 50%;
  z-index: 10000;
  background: ${ThemeColor};
  width: 90px;
  height: 256px;
`

export const BarList = styled.ul`
  padding-top: 10px;
  li {
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid #fff;
    position: relative;
    &:nth-child(1) {
      border: 0px solid red;
      line-height: 20px;
    }
    &:nth-child(6) {
      border: 0px solid red;
    }
    &.timetable a{
      height: 40px;
      background: #FFF;
      cursor: pointer;
      width: 80px;
      color: ${ThemeColor};
    }
    a {
      color: #fff;
      display: inline-block;
    }
    .p_code {
      position: absolute;
      width: 180px;
      height: auto;
      left: -180px;
      top: -61px;
    }
  }
`
export const PhoneWrapper = styled.div`
  width: 80%;
  margin: 1rem auto;
  img {
    width: 100%;
  }
`